import { useEffect, useState } from 'react';
import debounce from '@/utils/debounce';

export function useHeight(min = 300, el?: HTMLElement) {
  const [height, setHeight] = useState(0);

  const computedHeight = () => {
    const totalHeight = el ? el.clientHeight : document.documentElement.clientHeight;
    const res = totalHeight - min;
    setHeight(res);
  };
  const reset = debounce(computedHeight, 100, false);

  useEffect(() => {
    computedHeight();
    window.addEventListener('resize', reset);
    return () => {
      window.removeEventListener('resize', computedHeight);
    };
  }, []);

  return {
    height,
  };
}
